<template>
    <view class="detail-list-wrapper">
        <view class="title-container">
            <!-- <picker @change="bindPickerChange" :value="sortIndex" :range="sortList" range-key="Key">
                <view class="sort-select">
                    <view class="text">排序</view>
                    <view class="down-icon"></view>
                </view>
            </picker> -->
        </view>
        <detail-list-item v-for="(item, index) in detailList" :key="index" :item="item" />
    </view>
</template>

<script>
import detailListItem from "./detail-list-item.vue"
import { CHANGE_SORT_VALUE } from "@/store/mutation-type.js"
import { mapState } from "vuex"

export default {
    components: {
        detailListItem,
    },
    props: {
        sortList: {
            type: Array,
            default: () => [],
        },
    },
    computed: {
        ...mapState("report", ["detailList"]),
    },
    data() {
        return {
            sortIndex: 0,
        }
    },
    methods: {
        bindPickerChange(e) {
            const sortValue = this.sortList[e.detail.value].Value
            this.$store.commit(`report/${CHANGE_SORT_VALUE}`, sortValue)
            this.$emit("changeSort")
        },
    },
}
</script>

<style lang="scss">
.detail-list-wrapper {
    margin: 0 32rpx 24rpx;
    padding-bottom: 24rpx;

    .title-container {
        display: flex;
        justify-content: space-between;

        .sort-select {
            display: flex;
            align-items: center;
            padding: 4rpx 16rpx;
            border-radius: 4rpx;
            border: 1rpx solid $color-gray-1;
            font-size: 24rpx;

            .down-icon {
                width: 0;
                height: 0;
                border-right: 6rpx solid transparent;
                border-left: 6rpx solid transparent;
                border-top: 6rpx solid $color-gray-1;
                margin-left: 8rpx;
            }
        }
    }
}
</style>
